<template>
	<view class="content">
		<nav-list :page="pageIndex" @changeSelect="handleShowPage"></nav-list>
		<staff-info v-show="pageIndex === 0" @next="next"></staff-info>
		<family-info :familyData="familyData" v-show="pageIndex === 1" @next="next"></family-info>
		<curriculum-vitae :vitaeData="vitaeData" v-show="pageIndex === 2"></curriculum-vitae>
		<labor-contract :laborData="laborData" v-show="pageIndex === 3" @next="next"></labor-contract>
		<temporary :temporaryData="temporaryData" v-show="pageIndex === 4" @next="next"></temporary>
		<retire :retireData="retireData" v-show="pageIndex === 5" @next="next"></retire>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				pageIndex: 0,
				familyData: [],
				vitaeData: [],
				laborData: {},
				temporaryData: {},
				retireData: {}
			}
		},
		computed: {
			...mapGetters(
				[
					"userInfo",
				]
			)
		},
		onLoad() {

			this.fetchFamily()
		},
		methods: {
			next(index) {
				this.pageIndex = index
			},
			handleShowPage(i) {
				this.pageIndex = i
			},
			async fetchFamily() {
				let params = {}
				if (this.$route.query.staff_id) {
					params.id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id) {
					params.id = this.userInfo.staff_id
				}

				try {
					const response = await this.$api.fetchFamily(params)
					this.familyData = response.data.family_member
					this.vitaeData = response.data.work_job
					let c = response.data.contract
					let laborData = c.find(item => item.contract_status === 0)
					let temporaryData = c.find(item => item.contract_status === 1)
					let retireData = c.find(item => item.contract_status === 2)
					if (laborData) {
						this.laborData = laborData
					}
					if (temporaryData) {
						this.temporaryData = temporaryData
					}
					if (retireData) {
						this.retireData = retireData
					}
				} catch (e) {
					console.log('comeponent family(handleAddFamily) error ->', e)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;
	}
</style>